<template>
    <div>
        <van-nav-bar
                left-arrow
                left-text="个人信息"
                @click-left="backRoute"
        >
        </van-nav-bar>

        <van-cell-group class="cell-margin">
            <van-cell >
                <template #title>
                    <span class="custom-title">{{infoList.realname}}</span>
                    <van-icon name="manager" v-if="infoList.sex=='2'" color="pink"></van-icon>
                    <van-icon name="manager" v-else color="#1989fa"></van-icon>
                </template>
                <template slot="icon">
                    <van-image v-if="infoList.avatar" round width="4em"  height="4em" :src="infoList.avatar"/>
                    <van-image v-else round width="4em"  height="4em" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                </template>
                <template slot="label">
                    <div style="margin-left: 0.8rem">{{infoList.post}}</div>
                </template>
            </van-cell>
        </van-cell-group>

        <van-cell-group class="cell-margin">
            <van-cell center title="手机" :value="infoList.phone" value-class="cell-value"/>
            <van-cell title="邮箱" :value="infoList.email" value-class="cell-value"/>

            <van-cell
                    title="部门"
                    :value="infoList.departName"
                    label="武汉维普科技有限子益"
                    value-class="depart"
                    label-class="company"
            >

            </van-cell>

        </van-cell-group>

        <div style="width: 100%;text-align: center;padding-top:1rem" >
            <van-button
                    block
                    type="info"
                    style="width: 95%;margin: 0 auto;font-size:18px"
            >
                发消息
            </van-button>
        </div>
    </div>
</template>

<script>

    export default {
        name: "memberInfo",
        data(){
            return{
                searchFlag:false,
                viewMore:true,
                infoList:{
                    realname:'',
                    post:'',
                    avatar:'',
                    phone:null,
                    email:'',
                    department:'',
                    title:''
                },
            }
        },
        created(){
            this.infoList = this.$route.params;
            console.log("this.infoList>>>",this.infoList)
        },
        methods: {
            backRoute() {
                //通讯录个人信息页面返回问题
                if(this.infoList.page){
                    this.$router.push({name:this.infoList.page})
                }else{
                    let parmas={
                        title:this.$route.params.departName,
                        orgCode:this.$route.params.orgCode
                    }
                    this.$router.push({name: 'member',params:parmas})
                }
            },

        }
    }
</script>

<style scoped>
    .cell-margin{margin-top: 0.8rem}
    .custom-title{
        display: inline-block;
        padding: 0.5rem 0.5rem 0 0.8rem;
    }
    .cell-center{
        padding: 0.8rem 0;
        text-align: center;
        color:#1989fa;
    }
    .cell-value{
        margin-left: -14rem;
        text-align: left;
        color:#6581A9;
    }
    .company{
        margin-left: -1rem;
        text-align: center;
    }
    .depart{
        text-align: left;
        margin-left: -14rem;
        color:#222;
    }
</style>